<?php 
 require_once 'config.php';
 require_once 'function.php';
 ?>
 <?php  
 //1、获取分类ID
 $categoryId = $_GET["categoryId"];
 // 2、根据分类ID查询数据库
 //2.1连接数据库
$connect = connect();
//2.2sql语句
$sql = " SELECT p.id,p.title,p.created,p.content,p.views,p.likes,p.feature,c.`name`,u.nickname, 
(select count(id) from comments where comments.post_id = p.id ) as commentsCount 
FROM posts p
LEFT JOIN users u ON u.id = p.user_id
LEFT JOIN categories c on c.id = p.category_id
WHERE p.category_id = {$categoryId}
LIMIT 10";


$postArr = query($connect,$sql);
//把数据集合转化为二维数组
//创建数组
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>阿里百秀-发现生活，发现美!</title>
  <link rel="stylesheet" href="static/assets/css/style.css">
  <link rel="stylesheet" href="static/assets/vendors/font-awesome/css/font-awesome.css">
</head>
<body>
  <div class="wrapper">
    <div class="topnav">
      <ul>
        <li><a href="javascript:;"><i class="fa fa-glass"></i>奇趣事</a></li>
        <li><a href="javascript:;"><i class="fa fa-phone"></i>潮科技</a></li>
        <li><a href="javascript:;"><i class="fa fa-fire"></i>会生活</a></li>
        <li><a href="javascript:;"><i class="fa fa-gift"></i>美奇迹</a></li>
      </ul>
    </div>
    <?php include_once 'public/_header.php'; ?> 
    <?php include_once 'public/_aside.php'; ?>
    <div class="content">
      <div class="panel new">
        <h3><?php echo $postArr[0]['name'] ?></h3>
        <?php foreach ($postArr as $value): ?>
        <div class="entry">
          <div class="head">
            <a href="detail.php?postId=<?php echo $value['id']; ?>"><?php echo $value['title']?></a>
          </div>
          <div class="main">
            <p class="info"><?php echo $value['nickname']?> 发表于 <?php echo $value['created']?></p>
            <p class="brief"><?php echo $value['content']?></p>
            <p class="extra">
              <span class="reading">阅读(<?php echo $value['views']?>)</span>
              <span class="comment">评论(<?php echo $value['commentsCount']; ?>)</span>
              <a href="detail.php?postId=<?php echo $value['id']; ?>" class="like">
                <i class="fa fa-thumbs-up"></i>
                <span>赞(<?php echo $value['likes']?>)</span>
              </a>
              <a href="detail.php?postId=<?php echo $value['id']; ?>" class="tags">
                分类：<span><?php echo $value['name']?></span>
              </a>
            </p>
            <a href="detail.php?postId=<?php echo $value['id']; ?>" class="thumb">
              <img src="<?php echo $value['feature'] ?>" alt="">
            </a>
          </div>
        </div>
<?php endforeach ?>
         <div class="loadmore">
           <span class="btn">加载更多</span>
        </div>

      </div>
    </div>
    <div class="footer">
      <p>© 2016 XIU主题演示 本站主题由 themebetter 提供</p>
    </div>
  </div>
  <script src="static/assets/vendors/jquery/jquery.js"></script>
  <script>
     //定义一个变量，记录当前是第几次获取数据
    $(function(){
      //给加载更多的按钮注册点击事件
        var currentPage = 1;
        var pageSize = 10;
        $(".loadmore .btn").on("click", function(){
          // 获取文章的分类id
          var categoryId = location.search.split("=")[1];
           //每次点击加载更多，都是获取下一次的数据
          currentPage++;
           // 请求后台，加载更多的跟当前分类相关的数据
          $.ajax({
            url : "api/_getMorePost.php",
            type : "POST",
            data : {categoryId:categoryId,currentPage:currentPage,pageSize:pageSize},
            success : function(res){
               // 判断该次请求有没有数据
              if(res.code == 1){
                // 遍历数组，动态生成结构
                var data = res.data;
                $.each(data, function(index, val){
                  // var str = '<div class="entry">\
                  //     <div class="head">\
                  //       <a href="detail.php?postId='+ val.id +'">'+ val.title +'</a>\
                  //     </div>\
                  //     <div class="main">\
                  //       <p class="info">'+ val.nickname +' 发表于 '+ val.created +'</p>\
                  //       <p class="brief">'+ val.content +'</p>\
                  //       <p class="extra">\
                  //         <span class="reading">阅读('+ val.views +')</span>\
                  //         <span class="comment">评论('+ val.commentsCount +')</span>\
                  //         <a href="javascript:;" class="like">\
                  //           <i class="fa fa-thumbs-up"></i>\
                  //           <span>赞('+ val.likes +')</span>\
                  //         </a>\
                  //         <a href="javascript:;" class="tags">\
                  //           分类：<span>'+ val.name +'</span>\
                  //         </a>\
                  //       </p>\
                  //       <a href="javascript:;" class="thumb">\
                  //         <img src="'+ val.feature +'" alt="">\
                  //       </a>\
                  //     </div>\
                  //   </div>';
                  var str = `<div class="entry">
          <div class="head">
            <a href="detail.php?postId=${val.id}">${val.title}</a>
          </div>
          <div class="main">
            <p class="info">${val.nickname} 发表于 ${val.created}</p>
            <p class="brief">${val.content}</p>
            <p class="extra">
              <span class="reading">阅读(${val.views})</span>
              <span class="comment">评论(${val.commentsCount})</span>
              <a href="detail.php?postId='${val.id}'" class="like">
                <i class="fa fa-thumbs-up"></i>
                <span>赞(${val.likes})</span>
              </a>
              <a href="javascript:;" class="tags">
                分类：<span>${val.name}</span>
              </a>
            </p>
            <a href="javascript:;" class="thumb">
              <img src="${val.feature}" alt="">
            </a>
          </div>
        </div>`;
                  var entry = $(str);
                  entry.insertBefore($(".loadmore"));
                });
          // 生成结构完毕之后，需要判断一下，这次获取文章数据是不是已经是最后的数据了
          // 假设 99 篇文章 ， 每次获取10篇 ， 一共可以获取 10次
          // 最大的获取次数 = ceil(总的文章数 / 每次获取的数量)
          // 如果当前的次数跟最大的次数一样了，就是最后一次获取了
          // 就不应该再显示加载更多了
          // 计算出最大的获取次数
          var maxPage = Math.ceil(res.pageCount / 10);
          //判断当前的次数是不是已经是最大的次数了
          if (currentPage == maxPage){
            $(".loadmore .btn").hide();
          }
              }
            }
          });
        });
      });
  </script>
</body>
</html>